<template>
  <div>
    <div style="margin-top: 8px;display: flex;justify-content: center">
      <el-input placeholder="请输入查询的用户" prefix-icon="el-icon-search" style="width: 400px;margin-right: 8px"
      v-model="keywords" @keydown.enter.native="doSearch"></el-input>
      <el-button prefix-icon="el-icon-search" type="primary" @click="doSearch">搜索</el-button>
    </div>
    <div class="hr-container">
      <el-card class="box-card" v-for="(hr,index) in hrs" :key="index">
          <div class="card-header">
            <span>{{hr.name}}</span>
            <el-button style="float: right;padding: 3px;color: #ff2183" type="text"
                icon="el-icon-delete" @click="deleteHr(hr)"></el-button>
          </div>
        <div >
          <div class="img-container">
            <img :src="hr.userface" :alt="hr.name" :title="hr.name" class="userface-img">
          </div>
          <div class="userinfo-container">
            <div>用户名：{{hr.name}}</div>
            <div>手机号码：{{hr.phone}}</div>
            <div>电话号码：{{hr.telephone}}</div>
            <div>地址：{{hr.address}}</div>
            <div>用户状态：
              <el-switch
                  v-model="hr.enabled"
                  active-text="启用"
                  @change="enabledChange(hr)"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  inactive-text="禁用">
              </el-switch>
            </div>
            <div>
              用户角色：
              <el-tag type="success" style="margin-right: 4px" v-for="(role,indexj) in hr.roles" :key="indexj">
                {{role.namezh}}
              </el-tag>
              <el-popover
                  placement="right"
                  title="角色列表"
                  @show="showPop(hr)"
                  @hide="hidePop(hr)"
                  width="200"
                  trigger="click">
                <el-select v-model="selectedRoles" multiple placeholder="请选择">
                  <el-option
                      v-for="(r,indexk) in allroles"
                      :key="indexk"
                      :label="r.namezh"
                      :value="r.id">
                  </el-option>
                </el-select>
                <el-button slot="reference" icon="el-icon-more" type="text"></el-button>
              </el-popover>
            </div>
            <div>备注：{{hr.remark}}</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {getRequest} from "../../utils/api";
import {deleteRequest} from "../../utils/api";
import {putRequest} from "../../utils/api";

export default {
  name: "SysHr",
  data(){
    return{
      keywords:'',
      hrs:[],
      selectedRoles:[],
      allroles:[],
    }
  },
  mounted() {
    this.initHr();
  },
  methods:{
    showPop(hr){
      this.initAllRoles();
      let roles = hr.roles;
      this.selectedRoles = [];
      roles.forEach(r=>{
        this.selectedRoles.push(r.id);
      })
    },
    hidePop(hr){
      let url ='/system/hr/role?hrid='+hr.id;
      this.selectedRoles.forEach(sr=>{
        url += '&rids='+sr;
      })

      putRequest(url).then(res=>{
        if(res){
          this.initHr();
        }
      })
    },
    deleteHr(hr){
      this.$confirm('此操作将永久删除【'+hr.name+'】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRequest("/system/hr/"+hr.id).then(resp=>{
          if (resp) {
            this.initHr();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    doSearch(){
      this.initHr();
    },
    enabledChange(hr){
      delete hr.roles;
      putRequest("/system/hr/",hr).then(res=>{
        if(res){
          this.initHr();
        }
      })
    },
    initHr(){
      getRequest("/system/hr/?keywords="+this.keywords).then(res=>{
        if(res){
          this.hrs = res;
        }
      })
    },
    initAllRoles(){
      getRequest("/system/basic/permiss/").then(res=>{
        if(res){
          this.allroles = res;
        }
      })
    },
  },
}
</script>

<style >
.img-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.userface-img {
  width: 72px;
  height: 72px;
  border-radius: 72px;
}
.userinfo-container div {
  font-size: 12px;
  color: #409eff;
}

.userinfo-container {
  margin-top: 20px;
}
.hr-container{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

</style>